<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="zh" xml:lang="zh" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta content="text/html; charset=utf-8" http-equiv="content-type" />
        <title></title>
        <style type="text/css">
            body{font-size:12px; margin:0;padding:0;}
            .fl {float:left;}
            .clr {clear:boath;}            
            .container {width:960px;height:600px;margin:0 auto; padding:10px; border:solid 1px red;}
            .txt{width: auto;height: 22px; line-height: 22px; border:none;outline: none; color: #666; }
            .list { width: 250px; max-height: 240px; overflow-y: auto; padding: 0; border: solid 1px #ccc; position: absolute; z-index: 1; top: 17px; left: 3px; background: white; display: none; }
            .list li { list-style: none; padding: 0 5px; line-height: 24px; }
            .list li.curr, .list li:hover { background-color: #ccc; color: White; cursor: default; }
        </style>
    </head>
    <body>
        <div class="container">
            <p><b>Mailto-plugin demo</b></p>
            <div class="fl">mailto:</div>
            <div class="fl" style="position:relative;width:600px; border:solid 1px #ccc;padding:3px;">
                <input id="mailto1" name="email" class="txt fl" type="text" />
                <ul id="citypanel12" class="list">
                    <li val="zhangsan@163.com">zhangsan [zhangsan@163.com]</li>
                    <li val="zhanghaijun@126.com">zhanghaijun [zhanghaijun@126.com]</li>
                    <li val="liqingzhao@126.com">liqingzhao [liqingzhao@tom.com]</li>
                    <li val="linan@07baby.com">linan [linan@07baby.com]</li>
                    <li val="liujianguo@tom.com">liujianguo [liujianguo@tom.com]</li>
                    <li val="liujg1015@tom.com">liujg1015 [liujg1015@tom.com]</li>
                    <li val="liujg1015@163.com">liujg1015 [liujg1015@163.com]</li>
                    <li val="liujg1015@gmail.com">liujg1015 [liujg1015@gmail.com]</li>
                    <li val="wanghongmei@163.com">wanghongmei [wanghongmei@163.com]</li>
                    <li val="yangxueying@126.com">杨雪英 [yangxueying@126.com]</li>
                    <li val="yangning@gmail.com">yangning [yangning@gmail.com]</li>
                    <li val="hewentao@163.com">hewentao [hewentao@163.com]</li>
                    <li val="huangguoji@qq.com">huangguoji [huangguoji@qq.com]</li>
                    <li val="yubing@qq.com">yubing [yubing@qq.com]</li>
                    <li val="yuzecheng@qq.com">yuzecheng [yuzecheng@qq.com]</li>
                    <li val="tianxiaomei@sina.com.cn">tianxiaomei [tianxiaomei@sina.com.cn]</li>
                    <li val="tianqiang@qq.com">tianqiang [tianqiang@qq.com]</li>
                    <li val="yangyuan@hotmail.com">yangyuan [yangyuan@hotmail.com]</li>
                    <li val="weixinghua@hotmail.com">weixinghua [weixinghua@hotmail.com]</li>
                    <li val="xiexiren@163.com">xiexiren [xiexiren@163.com]</li>
                    <li val="chichengwen@gmail.com">chichengwen [chichengwen@gmail.com]</li>
                </ul> 
                <div class="clr"></div>               
            </div>
        </div>
        <script src="jquery-1.7.2.min.js" type="text/javascript"></script>
        <script src="hz2py.js" type="text/javascript"></script>
        <script src="mailbox.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $('#mailto1').mailbox({containerId:'citypanel12'});
            });            
        </script>
    </body>
</html>
